import styles from './index.module.scss'
import Icon from '@/components/Icon'
import NavBar from '@/components/NavBar'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect, useRef } from 'react'
import { useParams } from 'react-router'
import { getArticleDetailsAPI } from '@/store/action/article'
import { RootState } from '@/store'
import dayjs from 'dayjs'
import { sanitize } from 'dompurify'
import Skeleton from './components/Skeleton'
import hljs from 'highlight.js'
// （新版直接下载插件引入css文件即可实现代码高亮）
import 'highlight.js/styles/vs2015.css'

export default function Article() {
  const dispatch = useDispatch()
  // useParams 获取动态路由参数
  // 🔔 useParams 函数需要指定泛型确定 params 对象的格式
  const params = useParams<{ id: string }>()

  // 副作用
  useEffect(() => {
    // 发送请求
    dispatch(getArticleDetailsAPI(params.id))
  }, [dispatch, params.id])
  // 获取仓库数据
  const { detail } = useSelector((state: RootState) => state.article)

  // 代码高亮 兜底工作 （新版直接下载插件引入css文件即可）
  useEffect(() => {
    // console.log('加载完毕了', detail.art_id)
    // 文章未加载完毕,无法进行高亮 直接退出
    if (!detail.art_id) return
    hljs.configure({
      // 忽略未经转义的 HTML 字符
      ignoreUnescapedHTML: true,
    })

    // 查找容器元素下符合 pre code 选择器规则的子元素，进行高亮
    const codes = document.querySelectorAll('.dg-html pre')
    if (codes.length > 0) {
      return codes.forEach((el: any) => hljs.highlightElement(el))
    }
  }, [detail.art_id])
  // 作者信息 DOM
  const authorRef = useRef<HTMLDivElement>(null)
  // 滚动容器DOM
  const wrapperRef = useRef<HTMLDivElement>(null)
  // 滚动事件处理
  const handleScroll = () => {
    console.log('触发滚动事件', 2222)
  }

  return (
    <div className={styles.root}>
      <div className="root-wrapper">
        {/* 顶部导航栏 */}
        <NavBar right={<Icon type="icongengduo" />}>文章详情</NavBar>

        {/* 容器 */}
        <div className="wrapper" ref={wrapperRef} onScroll={handleScroll}>
          <div className="article-wrapper" hidden={!!detail.art_id}>
            {/* 骨架屏占位 */}
            <Skeleton />
          </div>
          {/* 文章描述信息栏 */}
          <div className="article-wrapper" hidden={!detail.art_id}>
            <div className="header">
              <h1 className="title">{detail.title}</h1>

              <div className="info">
                <span>
                  {dayjs(detail.pubdate).format('YYYY-MM-DD hh:mm:ss')}
                </span>
                <span>{detail.read_count} 阅读</span>
                <span>{detail.comm_count} 评论</span>
              </div>

              <div className="author" ref={authorRef}>
                {/* 作者信息  滚动出可视区外 , 头部显示作者信息 */}
                <img src={''} alt="" />
                <span className="name">{detail.aut_name}</span>
                <span className="follow">关注</span>
              </div>
            </div>

            {/* 文章正文内容区域 */}
            <div className="content">
              <div
                className="content-html dg-html"
                // 💥 dompurify.sanitize() 对 HTML 内容进行净化，防止 XSS 攻击
                dangerouslySetInnerHTML={{ __html: sanitize(detail.content) }}
              />
              <div className="date">
                发布文章时间：
                {dayjs(detail.pubdate).format('YYYY-MM-DD hh:mm:ss')}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
